body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
/*容器边距*/
.pageContainer{ padding-top: 20px; padding-left: 20px; padding-right: 20px; }

/* 笔记样式 */
.note-title-a{ font-size: 16px; font-weight: bold; line-height: 40px; border-bottom: 1px solid #e8e8e8; margin-bottom: 10px;}
.note-example-list-box{ display: flex; justify-content: space-between; margin-top: 10px;}
.note-example-list-item{ width: 49.5%;}
.note-example-box{ position: relative; width: 100%; box-sizing: border-box; border: 1px solid #DDD; padding: 24px 10px 10px; margin-bottom: 10px; border-radius: 4px;}
.note-example-box:after{ content: '实例展示'; position: absolute; top: 0; left: 10px; white-space: nowrap; font-size: 14px; color: #999; line-height: 20px;}
.note-code-case{ position: relative; padding-top: 24px; margin-top: 10px;}
.note-code-case > textarea{ position: relative; width: 100%; height: 400px; resize: none; box-sizing: border-box; line-height: 20px; border: 1px solid #e8e8e8; padding: 8px; border-radius: 4px; outline: none; }
.note-code-case:after{ content: '实例代码'; position: absolute; top: 0; left: 0px; white-space: nowrap; font-size: 14px; color: #999; line-height: 20px;}
.note-demo-parent-box{ position: relative; border: 1px solid #8841AB; padding: 24px 10px 10px; margin-top: 10px;}
.note-demo-parent-box:after{ content: '紫框为父组件区域'; position: absolute; top: 0; left: 10px; white-space: nowrap; font-size: 14px; color: #999; line-height: 20px;}
.note-demo-child-box{ position: relative; border: 1px solid red; padding: 24px 10px 10px; margin-top: 10px;}
.note-demo-child-box:after{ content: '红框为子组件区域'; position: absolute; top: 0; left: 10px; white-space: nowrap; font-size: 14px; color: #999; line-height: 20px;}
.note-example-intro{ font-size: 14px; color: #999; }

/* css3动画样式 */
.aninote-example-box{ position: relative; width: 100%; box-sizing: border-box; border: 1px solid #DDD; padding: 80px; margin-bottom: 10px; border-radius: 4px;}
.aninote-example-box:after{ content: 'css3动画展示'; position: absolute; top: 0; left: 10px; white-space: nowrap; font-size: 14px; color: #999; line-height: 20px;}

/* 其它-线性梯度 */
.view-note-example-linear .linear-gradient-aa{ width: 200px; height: 40px; margin-bottom: 10px; line-height: 40px; text-align: center;}
.view-note-example-linear .linear-gradient-aa-1{ background-image: linear-gradient(to top, red, yellow);}
.view-note-example-linear .linear-gradient-aa-2{ background-image: linear-gradient(to right, red, yellow);}
.view-note-example-linear .linear-gradient-aa-3{ background-image: linear-gradient(to bottom, red, yellow);}
.view-note-example-linear .linear-gradient-aa-4{ background-image: linear-gradient(to left, red, yellow);}


.view-note-example-linear .linear-gradient-aa-5{ background-image: linear-gradient(to right top, red, yellow);}
.view-note-example-linear .linear-gradient-aa-6{ background-image: linear-gradient(to right bottom, red, yellow);}
.view-note-example-linear .linear-gradient-aa-7{ background-image: linear-gradient(to left bottom, red, yellow);}
.view-note-example-linear .linear-gradient-aa-8{ background-image: linear-gradient(to left top, red, yellow);}


.view-note-example-linear .linear-gradient-bb{ width: 200px; height: 40px; margin-bottom: 10px; line-height: 40px; text-align: center;}
.view-note-example-linear .linear-gradient-bb-1{ background-image: linear-gradient(0deg, red, yellow);}
.view-note-example-linear .linear-gradient-bb-2{ background-image: linear-gradient(90deg, red, yellow);}
.view-note-example-linear .linear-gradient-bb-3{ background-image: linear-gradient(180deg, red, yellow);}
.view-note-example-linear .linear-gradient-bb-4{ background-image: linear-gradient(270deg, red, yellow);}

.view-note-example-linear .linear-gradient-bb-5{ background-image: linear-gradient(45deg, red, yellow);}
.view-note-example-linear .linear-gradient-bb-6{ background-image: linear-gradient(135deg, red, yellow);}
.view-note-example-linear .linear-gradient-bb-7{ background-image: linear-gradient(225deg, red, yellow);}
.view-note-example-linear .linear-gradient-bb-8{ background-image: linear-gradient(315deg, red, yellow);}

.view-note-example-linear .linear-gradient-cc{ width: 200px; height: 80px; margin-bottom: 10px; line-height: 40px; text-align: center;}
.view-note-example-linear .linear-gradient-cc-1{ background-image: linear-gradient(0deg, red, orange, yellow, green, blue);}
.view-note-example-linear .linear-gradient-cc-2{ background-image: linear-gradient(90deg, red, orange, yellow, green, blue);}

.view-note-example-linear .linear-gradient-dd{ width: 200px; height: 80px; margin-bottom: 10px; line-height: 40px; text-align: center;}
.view-note-example-linear .linear-gradient-dd-1{ background-image: linear-gradient(0deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);}
.view-note-example-linear .linear-gradient-dd-2{ background-image: linear-gradient(90deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);}

.view-note-example-linear .linear-gradient-ee{ width: 200px; height: 80px; margin-bottom: 10px; line-height: 40px; text-align: center;}
.view-note-example-linear .linear-gradient-ee-1{ background-image: linear-gradient(0deg, red 0% 25%, orange 25% 50%, yellow 50% 75%, green 75% 100%);}
.view-note-example-linear .linear-gradient-ee-2{ background-image: linear-gradient(90deg, red 0% 25%, orange 25% 50%, yellow 50% 75%, green 75% 100%);}

.view-note-example-linear .linear-gradient-ff{ position: relative; width: 80px; height: 80px; margin-bottom: 10px; line-height: 40px; text-align: center; outline: 1px solid #DDD;}
.view-note-example-linear .linear-gradient-ff-1{ background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);}
.view-note-example-linear .linear-gradient-ff-2::after{ 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); 
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.view-note-example-linear .linear-gradient-ff-2:hover::after{ width: 40px; height: 40px;}

/* 径向渐变 */
.view-note-example-radial .linear-radial-aa{ width: 100px; height: 100px; margin-bottom: 10px;}
.view-note-example-radial .linear-radial-aa-1{ background-image: radial-gradient(circle farthest-corner at center, red, green, blue);}
.view-note-example-radial .linear-radial-aa-2{ background-image: radial-gradient(circle farthest-side at center, red, green, blue);}
.view-note-example-radial .linear-radial-aa-3{ background-image: radial-gradient(circle farthest-corner at top, red, green, blue);}
.view-note-example-radial .linear-radial-aa-4{ background-image: radial-gradient(circle farthest-corner at bottom, red, green, blue);}

.view-note-example-radial .linear-radial-bb{ width: 100px; height: 100px; border-radius: 50%; margin-bottom: 10px;}
.view-note-example-radial .linear-radial-bb-1{ background-image: radial-gradient(circle, red, green);}
.view-note-example-radial .linear-radial-bb-2{ background-image: radial-gradient(circle, red, green, blue);}
.view-note-example-radial .linear-radial-bb-3{ background-image: radial-gradient(at 0% 0%, red, green);}
.view-note-example-radial .linear-radial-bb-4{ background-image: radial-gradient(farthest-side at 0% 0%, red, green);}

.view-note-example-radial .linear-radial-cc{ width: 100px; height: 100px; border-radius: 50%; margin-bottom: 10px;}
.view-note-example-radial .linear-radial-cc-1{ background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);}
.view-note-example-radial .linear-radial-cc-2{ height: 10px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);}




